<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <!-- :class="{'cur'：条件}" 如果条件成立，就多一个类class-->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
          <van-button  size="mini" plain hairline type="danger" @click="editiing=!editiing">
            {{editiing ? '取消': '编辑'}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
          v-for="(item, idx) in channels"
          :key="item.id"
          @click="hClickMyChannel(idx)"
          :class= "{'cur': curIndex === idx}">
          <span>{{item.name}}</span>
          <!-- 我的频道的x按钮，1.只有再编辑时才出现，2.推荐频道始终不能删除，它不应该显示x,推荐频道的 id始终为0 -->
          <van-icon v-show="editiing && item.id!==0" name="cross" class="btn" size="small"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
          v-for="item in recommendChannels"
          :key="item.id"
          @click="hAddChannel(item)">
          <span>{{item.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addChannel, deleteChannel } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  props:
  {
    channels: {
      type: Array,
      require: true
    },
    curIndex: {
      type: Number,
      require: true
    }
  },
  data () {
    return {
      // 编辑
      editiing: false,
      // 所有频道
      allChannels: []
    }
  },
  created () {
    this.loadAllChannels()
  },
  // 计算属性
  computed: {
    // 可选频道
    recommendChannels () {
      // 公式： this.allChannels - this.channels
      // 本质就是：从一个数组中减去另一个数组
      // 对 所有频道进行过滤，只留下那些个，没有出现在我的频道中的数据
      const result = this.allChannels.filter(channel => {
        // 留下那些个，没有出现在我的频道中的数据
        // 渠道我的频道中找一下channel,如果找到说明已经出现在我的频道，则不要保留；找不到则留下
        // item表示allchannels中的数据项
        const idx = this.channels.findIndex(item => item.id === channel.id)
        if (idx === -1) {
          // 没有找到--则留下
          return true
        } else {
          return false
        }
      })
      return result
    }
  },
  methods: {
    // 用户在可选频道上做一次点击，此时channel表示函数传来的参数item
    async hAddChannel (channel) {
      // 1.组装参数，改造api变成接口要的格式
      // 把未选频道channel，加入到this.channels已有频道中
      let curChannelList = [...this.channels, channel]
      console.log(curChannelList)
      curChannelList = curChannelList.map((item, idx) => {
        return {
          id: item.id,
          seq: idx
        }
      })
      // 去掉推荐 频道。由于推荐频道 总在第一位置，所以之间删除
      curChannelList.splice(0, 1)
      // 2.调用接口 通知后端服务器去更新频道
      const result = await addChannel(curChannelList)
      console.log(result)
      // 3.todo更新视图
      // this.channels 已经订阅的频道，这是从父组件中传过来的
      this.channels.push(channel)
      // 1.)修改已经订阅的频道 多出一项
      // 2.) 激活计算属性再次工作， 修改可选频道 少一项
      // 3.）还会去修改父组件中的channels,原因cahnnels本身就是通过props从父组件传递过来的 数组
    },
    // 用户点击了 我的频道 中的某一项
    // 目标： 1）关闭弹层；2）切换到当前点击的频道上去
    // 这两件事，都应该是父组件来做
    async hClickMyChannel (idx) {
      if (this.editiing) {
        // 删除频道
        if (idx === 0) {
          // 推荐频道不能删除
          return
        }
        // 1.请求接口，不再去订阅本频道
        const result = await deleteChannel(this.channels[idx].id)
        console.log(result);
        // 2.更新视图： 在this.channels已有的频道中去删除这一项
        this.channels.splice(idx, 1)
        // const idx = this.channels.findIndex(item => item.id === channel.id)
        // if (idx !== -1) {
        //   this.channels.splice(idx, 1)
        // }
        // 如果删除的频道在当前频道之前，则要去修复bug
        if (idx < this.curIndex) {
          alert('1')
          this.$emit('fixedIndex', this.curIndex - 1)
        }
      } else {
        // 抛出点击切换频道给父组件
        this.$emit('updateCurChannel', idx)
      }
    },
    // 获取所有频道数据
    async loadAllChannels () {
      const result = await getAllChannels()
      this.allChannels = result.data.data.channels
    }
  }
}
</script>

<style lang="less" scoped>
  .channel{
    padding:13px;
    font-size:14px;
  }
  .btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
}
.cur {
  color: red;
  font-weight: 700;
}
</style>
